<template>
 <div style="border:1px">
  <table border="1">
    <caption>欢迎光临vue开发的收银系统水果店</caption>
    <tr>
      <td>苹果10/斤,折扣&lt;8折&gt;</td>
    </tr>
    <tr>
      <td>您要购买的斤数<input v-model="num" type="text"></td>
    </tr>
    <tr>
      <td><button @click="addFn">结账买单</button></td>
    </tr>
    <tr>
      <td>结账单:总价:{{total}}元  折后价:{{price}} 元  省了:{{total-price}}元</td>
    </tr>
  </table>

 </div>
</template>


<script>
export default {
 data() {
 return {
  num:0,
  total:0,
  price:0,
 }
 },
 methods:{
  addFn(){
    this.total=this.num*10,
    this.price=this.num*10*0.8
  }
 },
}
</script>
<style lang="less" scoped>
table {
  text-align:center;
}

</style>
